<template>
  <!-- start 产品模板列表 -->
  <div class="product-template-list-view" ref="productTemplateListPage">
    <!-- start 搜索 -->
    <div class="product-template-list-search-group">
      <!-- start  搜索header -->
      <form
        class="base-search"
        @submit.prevent="searchModel.pageNum=1;search();trackEventHandler('search')"
      >
        <div class="product-template-list-base-search-group">
          <el-input v-model="searchModel.keyword" placeholder="请输入手机号或关联编号">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <base-button type="primary" native-type="submit">搜索</base-button>
          <base-button type="ghost" @event="resetParams">重置</base-button>
        </div>
        <span class="advanced-search-visible-btn" @click.self="panelSearchAdvancedToggle">
          <i class="iconfont icon-add"></i>
          高级搜索
        </span>
      </form>
      <!-- end 搜索 header -->

      <!-- start 高级搜索表单 -->
      <product-template-search-panel
        :config="{
          fields: this.productFields,
        }"
        ref="searchPanel"
      >
        <div class="advanced-search-btn-group" slot="footer">
          <base-button type="ghost" @event="resetParams">重置</base-button>
          <base-button type="primary" @event="powerfulSearch" native-type="submit">搜索</base-button>
        </div>
      </product-template-search-panel>
      <!-- end 高级搜索表单 -->
    </div>
    <!-- end 搜索 -->

    <!-- start content -->
    <div class="product-template-list-content">
      <!--operation bar start-->
      <div class="operation-bar-container">
        <div class="top-btn-group"></div>
        <!-- end operation bar-->

        <!-- start 操作按钮组 -->
        <div class="action-button-group">
          <!-- <el-dropdown trigger="click" v-if="authExport">
            <span class="el-dropdown-link el-dropdown-btn" @click="trackEventHandler('moreAction')">
              更多操作
              <i class="iconfont icon-nav-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="exportProduct(false)">导出</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="exportProduct(true)">导出全部</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>-->
          <span class="el-dropdown-link el-dropdown-btn" @click="showAdvancedSetting">
            选择列
            <i class="iconfont icon-nav-down"></i>
          </span>
        </div>
        <!-- end 操作按钮组 -->
      </div>
      <!-- end  -->

      <!-- <div class="base-selection-wrapper">
        <base-selection-bar
          ref="baseSelectionBar"
          v-model="multipleSelection"
          @toggle-selection="selectionToggle"
          @show-panel="() => panelTheMultipleSelectionShow = true"
        />
      </div>-->

      <!-- start 表格 -->
      <section style="padding:0 16px;background:#fff;">
      <el-table
        v-table-style
        :data="page.list"
        :row-key="getRowKey"
        stripe
        @sort-change="sortChange"
        @select="selectionHandle"
        @select-all="selectionHandle"
        :highlight-current-row="false"
        header-row-class-name="product-template-table-header"
        ref="productTemplateTable"
        class="product-template-table bbx-normal-list-box"
      >
        <template slot="empty">
          <BaseListForNoData v-show="!isLoading" :notice-msg="'暂无数据'"></BaseListForNoData>
        </template>
        <!-- <el-table-column type="selection" width="48" align="center" class-name="select-column"></el-table-column> -->
        <el-table-column
          v-for="column in columns"
          v-if="column.show"
          :key="column.fieldName"
          :label="column.displayName"
          :prop="column.fieldName"
          :width="column.width"
          :min-width="column.minWidth || '120px'"
          :sortable="column.sortable"
          show-overflow-tooltip
          :align="column.align"
          :fixed="column.fixLeft || false"
        >
          <template slot-scope="scope">
            <template v-if="column.conType === 'btnArray'">
              <a
                v-for="(item, index) in column.btnArr"
                :key="index"
                href
                :class="`view-detail-btn ${index>0?'mar-l-10':''}`"
                :style="`color:${item.color}`"
                @click.stop.prevent="item.click(scope.row)"
              >{{item.name}}</a>
            </template>
            <template v-else-if="column.conType === 'click'">
              <a
                href
                class="view-detail-btn"
                :style="`color:${column.color}`"
                @click.stop.prevent="column.click(scope.row)"
                v-if="hasViewCustomerAuth(scope.row)"
              >{{scope.row[column.fieldName]}}</a>
              <p v-else>{{scope.row[column.fieldName]}}</p>
            </template>
            <!-- <template v-else-if="column.fieldName === 'name'">
              <a
                href
                class="view-detail-btn"
                @click.stop.prevent="goProductTemplateView(scope.row.id)"
              >{{scope.row[column.fieldName]}}</a>
            </template>-->
            <template
              v-else-if="column.formType === 'select'"
            >{{ scope.row[column.fieldName] | displaySelect }}</template>
            <template
              v-else-if="column.formType === 'user'"
            >{{ scope.row[column.fieldName] && (scope.row[column.fieldName].displayName || scope.row[column.fieldName].name) }}</template>
            <template
              v-else-if="column.formType === 'location'"
            >{{ scope.row.attribute[column.fieldName] && scope.row.attribute[column.fieldName].address}}</template>
            <template
              v-else-if="column.formType === 'addr'"
            >{{ scope.row.attribute[column.fieldName] && scope.row.attribute[column.fieldName].all}}</template>
            <template
              v-else-if="column.fieldName === 'createUser'"
            >{{ scope.row.createUser && scope.row.createUser.displayName }}</template>
            <template v-else-if="column.fieldName === 'operation'">{{ getChiType(scope.row.operation)}}</template>
            <template v-else-if="column.fieldName === 'status'">
              <p
                :class="conversionStatus[scope.row.status] ? conversionStatus[scope.row.status]['className'] : ''"
              >{{ conversionStatus[scope.row.status] ? conversionStatus[scope.row.status]['text'] : ''}}</p>
            </template>
            <template v-else-if="column.fieldName === 'sendTime'">{{ scope.row.sendTime | fmt_datetime }}</template>

            <div
              v-else-if="column.formType === 'textarea'"
              v-html="buildTextarea(scope.row.attribute[column.fieldName])"
              @click="openOutsideLink"
            ></div>

            <template v-else>{{scope.row[column.fieldName]}}</template>
          </template>
        </el-table-column>
      </el-table>
      </section>
      <!-- end 表格 -->

      <!-- start 表格底部 -->
      <div class="table-footer">
        <div class="list-info">
          共
          <span class="level-padding">{{ page.total || 0 }}</span>记录
          <!-- ，已选中
          <span
            class="product-template-selected-count"
            @click="panelTheMultipleSelectionShow = true"
          >{{ multipleSelection.length }}</span>条
          <span class="product-template-selected-count" @click="selectionToggle()">清空</span>-->
        </div>
        <el-pagination
          class="product-template-table-pagination"
          background
          @current-change="jump"
          @size-change="handleSizeChange"
          :page-sizes="defaultTableData.defaultPageSizes"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          layout="prev, pager, next, sizes, jumper"
          :total="page.total"
        ></el-pagination>
      </div>
      <!-- end 表格底部 -->

      <!-- start 导出 -->
      <base-export
        ref="exportProductTemplatePanel"
        :columns="exportColumns()"
        :build-params="exportParamsBuild"
        :validate="exportCountCheck"
        method="post"
        :action="exportProductTemplate"
      />
      <!-- end 导出 -->

      <!-- start 已选择列表 -->
      <base-panel :show.sync="panelTheMultipleSelectionShow" width="420px">
        <h3 slot="title">
          <span>已选中产品模板({{ multipleSelection.length }})</span>
          <i
            v-if="multipleSelection.length > 0"
            class="iconfont icon-qingkongshanchu product-template-panel-btn"
            @click="selectionToggle()"
            title="清空已选中数据"
            data-placement="right"
            v-tooltip
          ></i>
        </h3>

        <div class="product-template-selected-panel">
          <div class="product-template-selected-tip" v-if="multipleSelection.length <= 0">
            <img :src="noDataImage" />
            <p>暂无选中的数据，请从列表中选择。</p>
          </div>
          <template v-else>
            <div class="product-template-selected-list">
              <div class="product-template-selected-row product-template-selected-head">
                <span class="product-template-selected-name">名称</span>
                <span class="product-template-selected-sn">电话</span>
              </div>
              <div
                class="product-template-selected-row"
                v-for="item in multipleSelection"
                :key="item.id"
              >
                <span class="product-template-selected-name">{{ item.name }}</span>
                <span class="product-template-selected-sn">{{ item.phone }}</span>
                <button
                  type="button"
                  class="product-template-selected-delete"
                  @click="selectProductTemplateCancel(item)"
                >
                  <i class="iconfont icon-fe-close"></i>
                </button>
              </div>
            </div>
          </template>
        </div>
      </base-panel>
      <!-- end 已选择列表 -->
    </div>
    <!-- end content -->

    <!-- <base-table-advanced-setting ref="advanced" @save="columnStatusModify" /> -->
    <!-- 选择列 --> 
    <biz-select-column ref="advanced" @save="saveColumnStatus" />

    <!-- 编辑联系人弹窗 -->
    <edit-contact-dialog ref="EditContactDialog" :original-value="selectedContact"></edit-contact-dialog>
  </div>
  <!-- end 产品模板列表 -->
</template>

<script>
import _ from 'lodash';
import Page from '@model/Page';
import platform from '@src/platform';
import { formatDate } from 'pub-bbx-utils';
import { safeNewDate } from '@src/util/time';
import { storageGet, storageSet } from "@src/util/storage";
import EditContactDialog from '@src/modules/customer/view/operationDialog/EditContactDialog.vue';

import { getContactList } from '@src/api/CustomerContact.js';

import SearchPanel from '../components/SearchPanel.vue';
import AuthUtil from '@src/util/auth';

import { getTemplates, getRecords } from '@src/api/DoMyself.js';
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')

/* export & import */
import { exportProductTemplate } from '@src/api/Export';
/* mixin */
import { 
  VersionControlTaskMixin, 
  VersionControlIMMixin,
  VersionControlCustomerMixin,
  VersionControlProductMixin
} from '@src/mixins/versionControlMixin'
import { isNotOnlyCustomerServiceCloudVersion } from '@src/util/version'
import { defaultTableData } from '@src/util/table'

/* 高级搜索面板 列数 */
const PRODUCT_TEMPLATE_LIST_ADVANCE_SEARCH_COLUMN_NUMBER = 'customer_contact_search_column_number';
/* 高级搜索 搜索数据 */
const STORE_USER_FOR_SEARCH_PRODUCT_TEMPLATE = 'store_user_for_search_product_template';
// 产品模板列表数据
const PRODUCT_TEMPLATE_LIST_DATA = 'product_template_list_data';
// 产品模板列表选择
const PRODUCT_CHECK = 'productCheck';
	
const MESSAGE_LIST_KEY = 'message_list';

const link_reg = /((((https?|ftp?):(?:\/\/)?)(?:[-;:&=\+\$]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\?\+=&;:%!\/@.\w_]*)#?(?:[-\+=&;%!\?\/@.\w_]*))?)/g;

let pending = false; // 记录交互pending
export default {
  name: 'customer-conctact-message',
  mixins: [
    VersionControlTaskMixin,
    VersionControlIMMixin,
    VersionControlCustomerMixin,
    VersionControlProductMixin
  ],
  props: {
    initData: {
      type: Object,
      default: () => ({})
    },
    isLoading:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      defaultTableData,
      noDataImage,
      auth: {}, // 权限
      columns: this.buildTableFixedColumns(), // 列
      columnNum: 1, // 高级搜索 列数
      page: new Page(), // page 对象
      productTemplateConfig: {
        productTemplateConfig: {},
        productFields: []
      }, // 产品配置项
      searchModel: {
        keyword: '',
        pageSize: 10,
        pageNum: 1,
        orderDetail: {},
        moreConditions: {}
      },
      selectedContact: {}, // 编辑联系人弹窗参数,
      // 表单选择系列组件相关参数
      multipleSelection: [],
      panelTheMultipleSelectionShow: false,
      conversionStatus: {
        fail_send: {
          text: '发送失败',
          value: 'fail_send',
          className: 'error-text'
        },
        succ_send: {
          text: '发送成功',
          value: 'succ_send',
          className: 'success-text'
        },
        doing_send: {
          text: '发送中',
          value: 'doing_send',
          className: 'loading-text'
        }
      },
      exportProductTemplate
    };
  },
  computed: {
    productFields() {
      let operationDataSource = [
        {
          text: '全部类型',
          value: ''
        },
        {
          text: '工单响应通知',
          value: 'taskResponseHandle'
        },
        {
          text: '工单完成通知（回访）',
          value: 'autoReviewHandle'
        },
        {
          text: '工单动态更新通知',
          value: 'taskRemarkEdit'
        },
        {
          text: '新建事件通知',
          value: 'eventCreateHandle'
        },
        {
          text: '事件完成通知',
          value: 'eventFinishHandle'
        },
        {
          text: '定时通知',
          value: 'remindMessageHandle'
        },
        {
          text: '计划时间通知',
          value: 'taskPlanSmsRemindHandle'
        },
        {
          text: '客户短信提醒',
          value: 'sendSms2Cus'
        },
        {
          text: '产品短信提醒',
          value: 'sendSms2CusByPro'
        },
        {
          text: '自助门户验证码',
          value: 'SSP'
        },
        {
          text: '验证码',
          value: 'SuperAdmin'
        },
        {
          text: '离线通知',
          value: 'OfflineNotifyWithSms'
        },
      ]
      
      const needJudgeByVersionShowVales = ['taskResponseHandle', 'autoReviewHandle', 'taskRemarkEdit']
      
      operationDataSource = operationDataSource.filter(item => {
        
        if (item.value == 'OfflineNotifyWithSms') {
          return this._isShowIMModule
        }
        
        if (item.value == 'taskPlanSmsRemindHandle') {
          return this._isShowTaskPlanTask
        }
        
        if (item.value == 'sendSms2Cus') {
          return this._isShowCustomerRemind
        }
        
        if (item.value == 'sendSms2CusByPro') {
          return this._isShowProductRemind
        }
        
        if (item.value == 'remindMessageHandle') {
          return isNotOnlyCustomerServiceCloudVersion()
        }
        
        if (needJudgeByVersionShowVales.includes(item.value)) {
          return this._isShowTaskModule
        }
        
        return true
        
      })
      
      return (
        this.initData.productFields || [
          {
            displayName: '通知类型',
            fieldName: 'operation',
            formType: 'select',
            placeHolder: '请输入联系人姓名',
            isExport: false,
            setting: {
              isMulti: false,
              dataSource: operationDataSource
            },
            isSystem: 1,
            orderId: 1
          },
          {
            displayName: '手机号码',
            fieldName: 'phone',
            formType: 'text',
            placeHolder: '请输入手机号',
            isExport: false,
            isSystem: 1,
            orderId: 2
          },
          {
            displayName: '模板名称',
            fieldName: 'templateId',
            formType: 'select',
            placeHolder: '请选择客户',
            isExport: false,
            setting: {
              isMulti: false,
              dataSource: []
            },
            isSystem: 1,
            orderId: 3
          },
          {
            displayName: '关联编号',
            fieldName: 'relevanceNumber',
            formType: 'text',
            placeHolder: '请输入关联编号',
            isExport: false,
            isSystem: 1,
            orderId: 4
          },
          {
            displayName: '按时间查询',
            fieldName: 'time',
            formType: 'datetime',
            placeHolder: '请输入关联编号',
            // defaultTime: ["00:00:00", "23:59:59"],
            isExport: false,
            isSystem: 1,
            orderId: 5
          },
          {
            displayName: '选择状态',
            fieldName: 'status',
            formType: 'select',
            placeHolder: '请输入关联编号',
            isExport: false,
            setting: {
              isMulti: false,
              dataSource: [
                {
                  text: '全部',
                  value: ''
                },
                {
                  text: '成功',
                  value: 'succ_send'
                },
                {
                  text: '失败',
                  value: 'fail_send'
                },
                {
                  text: '发送中',
                  value: 'doing_send'
                }
              ]
            },
            isSystem: 1,
            orderId: 6
          }
        ]
      ).sort((a, b) => a.orderId - b.orderId);
    },
    // 导出权限
    authExport() {
      return true
      // return thisreturn true.initData.loginUser.authorities.EXPORT_IN;
    },

    /* 已选择 id列表 */
    selectedIds() {
      return this.multipleSelection.map(item => item.id) || [];
    }
  },
  filters: {
    displaySelect(value) {
      if (!value) return null;
      if (value && typeof value === 'string') {
        return value;
      }
      if (Array.isArray(value) && value.length) {
        return value.join('，');
      }
      return null;
    },
  },
  mounted() {
    this.auth = (this.initData && this.initData.authorities) || {};

    this.productTemplateConfig = {
      productConfig: (this.initData && this.initData.productConfig) || {
        productType: []
      },
      productFields: (this.initData.productFields || []).sort(
        (a, b) => a.orderId - b.orderId
      )
    };

    // this.paramsSearchRevert();
    this.columns = this.buildTableColumn();
    this.getTemplate();
    this.search();

    // [tab_spec]标准化刷新方式
    window.__exports__refresh = this.search;
  },
  methods: {
    getChiType(type) {
      if (type == 'taskResponseHandle') {
        return '工单响应通知';
      } else if (type == 'autoReviewHandle') {
        return '工单完成通知（回访）';
      } else if (type == 'taskFinaishHandle_finish') {
        return '工单完成通知';
      } else if (type == 'taskRemarkEdit') {
        return '工单动态更新通知';
      } else if (type == 'eventCreateHandle') {
        return '新建事件通知';
      } else if (type == 'eventFinishHandle') {
        return '事件完成通知';
      } else if (type == 'caseAutoReviewHandle') {
        return '事件完成通知（回访）';
      } else if (type == 'eventUpdateHandle') {
        return '事件动态更新通知';
      } else if (type == 'remindMessageHandle') {
        return '定时通知';
      } else if (type == 'taskPlanSmsRemindHandle') {
        return '计划时间通知';
      } else if (type == 'sendSms2Cus') {
        return '客户短信提醒';
      } else if (type == 'sendSms2CusByPro') {
        return '产品短信提醒';
        // }else if(type == 'sendBatchSms2Cus'){
        //     type = "客户批量发送短信提醒";
        // }else if(type == 'sendBatchSms2CusByPro'){
        //     type = "产品批量发送短信提醒";
      } else if (type == 'SSP') {
        return '自助门户验证码';
      } else if (type == 'SuperAdmin') {
        return '验证码';
      } else if (type == 'taskPlanTimeRemindHandle') {
        return '工单计划时间提醒通知';
      } else if (type == 'smsTaskStartHandle') {
        return '工单开始通知';
      } else if (type == 'eventRollBackHandle') {
        return '事件回退通知';
      } else if (type == 'eventEvaluateHandle') {
        return '事件评价通知';
      } else if (type == 'eventOffHandle') {
        return '事件取消通知';
      } else if (type == 'taskCreateHandle') {
        return '新工单通知';
      } else if (type == 'taskTransferHandle') {
        return '工单被转派通知';
      } else if (type == 'taskRollBackHandle') {
        return '工单回退通知';
      } else if (type == 'taskOffHandle') {
        return '工单取消通知';
      }else if (type == 'taskEvaluateHandle') {
        return '工单评价通知';
      } else if (type == 'taskCostHandle') {
        return '工单结算通知';
      } else if (type == 'taskCloseHandle') {
        return '工单关闭通知';
      } else if (type == 'taskOverTimeHandle') {
        return '工单超时提醒通知';
      } else if (type == 'AutoReview' || type == 'autoReview') {
        return '工单完成通知(含回访)';
      }else if (type == 'OfflineNotifyWithSms') {
        return '离线通知';
      }else if (type == 'NEW_COURSE_REMIND') {
        return '课程学习通知';
      }else if (type == 'COURSE_LEARN_URGE') {
        return '课程催促学习通知';
      }else if (type == 'COURSE_TASK_OFF') {
        return '课程下架通知';
      }else if (type == 'NEW_EXAMINATION_REMIND') {
        return '考试任务通知';
      }else if (type == 'COURSE_OVERDUE') {
        return '课程逾期通知';
      }else if (type == 'EXAMINATION_LEARN_URGE') {
        return '催促考试通知';
      }else if (type == 'COURSE_SIGN_UP_SUCCESS') {
        return '课程报名成功通知';
      }else if (type == 'COURSE_SIGN_UP_FAILURE') {
        return '课程报名失败通知';
      } else if (type.indexOf('trigger_') > -1) {
        return '触发器通知';
      }else if(type === 'taskNodeHandle') {
        return this.$t('message.setting.taskCustomMessage');
      }else if (type == 'projectSatisfactionMessage') {
        return '项目评价通知';
      }
      return '其他';
      
    },
    getTemplate() {
      // 获取所有的模板
      getTemplates({ pageSize: '999', pageNum: '1' }).then(res => {
        this.productFields[2].setting.dataSource = [
          {
            text: '全部',
            value: ''
          },
          ...res.data.list
            .filter(
              item =>
                item.status == 'pass_approval' && item.notice == '自定义通知'
            )
            .map(item => {
              return {
                text: item.name,
                value: item.id
              };
            })
        ];
      });
    },
    showAdvancedSetting() {
      window.TDAPP.onEvent('pc：客户联系人-选择列事件');
      this.$refs.advanced.open(this.columns);
    },
    buildParams() {
      const sm = Object.assign({}, this.searchModel);
      let params = {
        keyword: sm.keyword,
        pageSize: sm.pageSize,
        pageNum: sm.pageNum,
        orderDetail: (sm || {}).orderDetail,
        ...(sm.moreConditions || {})
      };

      params.startTime = params.timeStart
      params.endTime = params.timeEnd

      return params;
    },
    // 构建表格固定列
    buildTableFixedColumns() {
      // return []
      return [
        {
          displayName: '通知类型',
          fieldName: 'operation',
          show: true,
          fixed: false,
          minWidth: '150px'
        },
        {
          displayName: '接收号码',
          fieldName: 'phones',
          fixed: false,
          show: true
        },
        {
          displayName: '发送条数',
          fieldName: 'sendNum',
          fixed: false,
          show: true
        },
        {
          displayName: '发送时间',
          fieldName: 'sendTime',
          fixed: false,
          show: true
        },
        {
          displayName: '关联编号',
          fieldName: 'relevanceNumber',
          fixed: false,
          show: true
        },
        {
          displayName: '状态',
          fieldName: 'status',
          fixed: false,
          show: true
        },
        {
          displayName: '说明',
          fieldName: 'errorStatus',
          fixed: false,
          show: true
        }
      ];
    },
    // 构建表格列
    buildTableColumn() {
      let LocalStorageColumn = this.getLocalStorageData().message_list || [] ;

      let localColumns = []
        .map(i => (typeof i == 'string' ? { fieldName: i, show: true } : i))
        .reduce((acc, col) => (acc[col.fieldName] = col) && acc, {});
      let baseColumns = this.buildTableFixedColumns();
      let columns = [...baseColumns].map(col => {
        let show = col.show;
        let width = col.width;
        let localField = localColumns[col.fieldName];

        if (null != localField) {
          width = typeof localField.width == 'number' ? `${localField.width}px` : '';
          show = localField.show !== false;
        }
        if(LocalStorageColumn.length){
          LocalStorageColumn.map(item => {
            const { fieldName } = item;
            if(fieldName === col.fieldName){
              col.show = item.show;
              col.fixLeft = item.fixLeft
            }
          })
        }else{
          col.show = show;
        }
        col.width = width;
        col.type = 'column';

        return col;
      });
      return columns;
    },
    // 兼容旧版本的 已选择列
    backwardCompatibleColumn() {
      let checkedColumnsOldVersion = localStorage.getItem(PRODUCT_CHECK);

      if (!checkedColumnsOldVersion) return;

      let columns = checkedColumnsOldVersion.split(',');
      localStorage.removeItem(PRODUCT_CHECK);

      return (columns || [])
        .filter(c => c)
        .map(c => {
          return c;
        });
    },
    // 保存选择列配置
    saveColumnStatus(event) {
      let columns = event.data || []
      
      this.columns = []
      this.$nextTick(() => {
        this.$set(this, 'columns', columns.slice());
        // 保存选择列到本地
        this.saveColumnStatusToStorage()
      })
      this.$message.success(this.$t('common.base.saveSuccess'));
    },
    // 保存选择列配置到本地
    saveColumnStatusToStorage() {
      const localStorageData = this.getLocalStorageData();
      let columnsStatus = null
      // 判断是否存储选择列
      const columnsList = this.columns.map(c => ({
        fieldName: c.fieldName,
        show: c.show,
        width: c.width,
        fixLeft: c.fixLeft
      }));
      if (localStorageData.columnStatus) {
        localStorageData.columnStatus = columnsList;
        columnsStatus = localStorageData.columnStatus;
      } else {
        columnsStatus = columnsList;
      }
      this.saveDataToStorage(MESSAGE_LIST_KEY, columnsStatus);
    },
    // 获取本地localstorage
    getLocalStorageData() {
      const dataStr = storageGet(MESSAGE_LIST_KEY, '{}');
      return JSON.parse(dataStr);
    },
    // 保存数据到本地localstorage
    saveDataToStorage(key, value) {
      const data = this.getLocalStorageData();
      data[key] = value;
      storageSet(MESSAGE_LIST_KEY, JSON.stringify(data));
    },
    // 修改列状态
    columnStatusModify(event) {
      let columns = event.data || [];
      let colMap = columns.reduce(
        (acc, col) => (acc[col.fieldName] = col) && acc,
        {}
      );

      this.columns.forEach(col => {
        let newCol = colMap[col.fieldName];
        if (null != newCol) {
          this.$set(col, 'show', newCol.show);
          this.$set(col, 'width', newCol.width);
        }
      });

      const columnsStatus = this.columns.map(c => ({
        fieldName: c.fieldName,
        show: c.show,
        width: c.width
      }));
      this.localStorageSet(
        'columnStatus',
        columnsStatus,
        PRODUCT_TEMPLATE_LIST_DATA
      );
    },

    // 操作选择
    selectionHandle(selection) {
      let tv = this.selectionCompute(selection);

      let original = this.multipleSelection.filter(ms =>
        this.page.list.some(cs => cs.id === ms.id)
      );

      let unSelected = this.page.list.filter(c =>
        original.every(oc => oc.id !== c.id)
      );

      if (tv.length > this.selectedLimit) {
        this.$nextTick(() => {
          original.length > 0
            ? unSelected.forEach(row => {
              this.$refs.productTemplateTable.toggleRowSelection(row, false);
            })
            : this.$refs.productTemplateTable.clearSelection();
        });
        return this.$platform.alert(`最多只能选择${this.selectedLimit}条数据`);
      }

      this.multipleSelection = tv;
      console.log(this.multipleSelection, 'select');

      this.$refs.baseSelectionBar?.openTooltip();
    },

    // 计算已选择
    selectionCompute(selection) {
      let tv = [];

      tv = this.multipleSelection.filter(ms =>
        this.page.list.every(c => c.id !== ms.id)
      );
      tv = _.uniqWith([...tv, ...selection], _.isEqual);

      return tv;
    },
    /** 把对象中!!为false的值去除（eg. false, undefined, null...），except 可以把想保留的值留下(eg.[0])
     * 主要用于向后端传参，把无用的空值过滤掉
     * var a = { a: 0, b: 1, c: null, d: undefined, e: false}
     * deleteValueFromObject(a) =>  {b: 1}
     * deleteValueFromObject(a, [0]) =>  {a: 0, b: 1}
     */
    deleteValueFromObject(sourceObj, except = []) {
      let obj = _.cloneDeep(sourceObj);
      if (except.length) {
        Object.keys(obj).forEach(key => {
          if (typeof obj[key] === 'object' && obj[key]) {
            obj[key] = this.deleteValueFromObject(obj[key], except);
          }
          if (!obj[key] && except.every(ex => ex !== obj[key])) {
            delete obj[key];
          }
        });
      } else {
        Object.keys(obj).forEach(key => {
          if (typeof obj[key] === 'object' && obj[key]) {
            obj[key] = this.deleteValueFromObject(obj[key]);
          }
          if (!obj[key]) {
            delete obj[key];
          }
        });
      }
      if (Object.keys(obj).length) {
        return obj;
      }
      return undefined;
    },
    // 跳转 至客户详情
    // goProductTemplateView(id) {
    //   let fromId = window.frameElement.getAttribute("id");

    //   this.$platform.openTab({
    //     id: `product_template_view_${id}`,
    //     title: "产品模板信息",
    //     close: true,
    //     url: `/product/detail/${id}?noHistory=1`,
    //     fromId
    //   });
    // },
    // 页码数切换
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.searchModel.pageNum = 1;

      this.localStorageSet('pageSize', pageSize, PRODUCT_TEMPLATE_LIST_DATA);
      this.search();
    },
    // 跳转
    jump(pageNum) {
      this.searchModel.pageNum = pageNum;
      this.search();
    },
    /* 获取本地数据 */
    localStorageGet(key) {
      try {
        const dataStr = localStorage.getItem(key) || '{}';
        return JSON.parse(dataStr);
      } catch (error) {
        console.log('error: ', error);
        return {};
      }
    },
    /* 设置本地数据 */
    localStorageSet(key, value, rootKey = null) {
      try {
        if (!rootKey) {
          localStorage.setItem(key, JSON.stringify(value));
        } else {
          const data = this.localStorageGet(rootKey);

          data[key] = value;
          localStorage.setItem(rootKey, JSON.stringify(data));
        }
      } catch (err) {
        console.log('localStorageSet err', err);
      }
    },
    // 搜索
    search() {
      const params = this.buildParams();
      this.$emit('pageLoading', true);
      return getRecords(params)
        .then(res => {
          this.$refs.searchPanel.close()
          this.$emit('pageLoading', false);
          this.page = res.data;
          this.matchSelected(); // 把选中的匹配出来
        })
        .catch(err => {
          this.$emit('pageLoading', false);
        });
    },
    // 设置高级搜索面板 列
    setAdvanceSearchColumn(command) {
      this.columnNum = Number(command);
      try {
        localStorage.setItem(
          PRODUCT_TEMPLATE_LIST_ADVANCE_SEARCH_COLUMN_NUMBER,
          this.columnNum
        );
      } catch (error) {
        console.log(error);
      }
    },
    sortChange(option) {
      /**
       * 目前情况：
       * 所有字段理应后台获取，但是获取的所有字段中没有 createTime
       *
       */
      try {
        const { prop, order } = option;
        if (!order) {
          this.searchModel.orderDetail = {};
          return this.search();
        }

        let sortModel = {
          isSystem:
            prop === 'createTime' || prop === 'updateTime' || prop === 'type'
              ? 1
              : 0,
          sequence: order === 'ascending' ? 'ASC' : 'DESC',
          column:
            prop === 'createTime' || prop === 'updateTime' || prop === 'type'
              ? `productTemplate.${prop}`
              : prop
        };

        const sortedField = this.productTemplateConfig.productFields.filter(
          sf => sf.fieldName === prop
        )[0] || {};

        if (
          prop === 'createTime'
          || prop === 'updateTime'
          || sortedField.formType === 'date'
          || sortedField.formType === 'datetime'
        ) {
          sortModel.type = 'date';
        } else {
          sortModel.type = sortedField.formType;
        }

        this.searchModel.orderDetail = sortModel;

        this.search();
      } catch (e) {
        console.error('product template sortChange err', e);
      }
    },
    // 搜索参数恢复
    paramsSearchRevert() {
      const localStorageData = this.localStorageGet(PRODUCT_TEMPLATE_LIST_DATA);

      if (localStorageData && localStorageData.pageSize) {
        this.searchModel.pageSize = Number(localStorageData.pageSize);
      }

      const num = localStorage.getItem(
        PRODUCT_TEMPLATE_LIST_ADVANCE_SEARCH_COLUMN_NUMBER
      ) || 1;
      this.columnNum = Number(num);
    },
    panelSearchAdvancedToggle() {
      
      this.$refs.searchPanel.open();
      
      this.$nextTick(() => {
        let forms = document.getElementsByClassName('advanced-search-form');
        for (let i = 0; i < forms.length; i++) {
          let form = forms[i];
          form.setAttribute('novalidate', true);
        }
      });
    },
    /**
     * @description 全量搜索
     */
    powerfulSearch() {
      this.searchModel.pageNum = 1;
      this.searchModel.moreConditions = this.$refs.searchPanel.buildParams();

      this.trackEventHandler('search');
      this.search();
    },
    resetParams() {
      window.TDAPP.onEvent('pc：产品模板-重置事件');
      this.searchIncludeMoreConditions = false;
      this.searchModel = {
        keyword: '',
        pageNum: 1,
        pageSize: this.page.pageSize,
        orderDetail: {},
        moreConditions: {
          conditions: []
        }
      };

      this.$refs.searchPanel.resetParams();
      this.search();
    },
    // TalkingData事件埋点
    trackEventHandler(type) {
      if (type === 'search') {
        window.TDAPP.onEvent('pc：短信记录-搜索事件');
        return;
      }
    },
    openOutsideLink(e) {
      let url = e.target.getAttribute('url');
      if (!url) return;
      if (!/http/gi.test(url))
        return this.$platform.alert('请确保输入的链接以http或者https开始');
      this.$platform.openLink(url);
    },
    buildTextarea(value) {
      return value
        ? value.replace(link_reg, match => {
          return `<a href="javascript:;" target="_blank" url="${match}">${match}</a>`;
        })
        : '';
    },
    getRowKey(row) {
      return row.id;
    },
    openDialog(contact) {
      // 弹窗参考数据
      // TO DO 权限
      this.selectedContact = contact;
      this.$nextTick(this.$refs.EditContactDialog.openDialog);
    },
    /**
     * 是否有操作联系人权限，需要满足以下条件之一：
     *
     * 1. 编辑客户全部权限： 全部客户
     * 2. 编辑客户团队权限： 没有团队的客户都可编辑，有团队的按团队匹配。 包含个人权限
     * 3. 编辑客户个人权限： 自己创建的 或 客户负责人
     */
    hasEditCustomerAuth(customer) {
      let loginUserId = this.initData.loginUser.userId;
      return AuthUtil.hasAuthWithDataLevel(
        this.permission,
        'CUSTOMER_EDIT',
        // 团队权限判断
        () => {
          let tags = Array.isArray(customer.tags) ? customer.tags : [];
          // 无团队则任何人都可编辑
          if (tags.length == 0) return true;

          let loginUserTagIds = this.initData.loginUser.tagIdsWithChildTag || [];
          return tags.some(tag => loginUserTagIds.indexOf(tag.id) >= 0);
        },
        // 个人权限判断
        () => {
          return (
            customer.createUser == loginUserId
            || this.isCustomerManager(customer)
          );
        }
      );
    },
    /**
     * 当前用户是否是该客户负责人
     * 客户负责人用于和客户创建人相同权限
     */
    isCustomerManager(customer) {
      return this.initData.loginUser.userId === customer.customerManager;
    },
    /**
     * 是否有查看客户权限，需要满足以下条件之一：
     *
     * 1. 查看客户全部权限： 全部客户
     * 2. 查看客户团队权限： 没有团队的客户都可查看，有团队的按团队匹配。 包含个人权限
     * 3. 查看客户个人权限： 自己创建的 或 客户负责人
     */
    hasViewCustomerAuth(customer) {
      let loginUserId = this.initData.loginUser.userId;
      return AuthUtil.hasAuthWithDataLevel(
        this.permission,
        'CUSTOMER_VIEW',
        // 团队权限判断
        () => {
          let tags = Array.isArray(customer.tags) ? customer.tags : [];
          // 无团队则任何人都可编辑
          if (tags.length == 0) return true;

          let loginUserTagIds = this.initData.loginUser.tagIdsWithChildTag || [];
          return tags.some(tag => loginUserTagIds.indexOf(tag.id) >= 0);
        },
        // 个人权限判断
        () => {
          return customer.createUser == loginUserId || this.isCustomerManager;
        }
      );
    },

    toggleSelection(rows) {
      let isNotOnCurrentPage = false;
      let item = undefined;
      let row = undefined;

      if (rows) {
        for (let i = 0; i < rows.length; i++) {
          row = rows[i];
          isNotOnCurrentPage = this.page.list.every(item => {
            return item.id !== row.id;
          });
          if (isNotOnCurrentPage) return;
        }
        rows.forEach(row => {
          this.$refs.productTemplateTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.productTemplateTable.clearSelection();
        this.multipleSelection = [];
      }
    },

    // 切换已选择
    selectionToggle(rows) {
      let isNotOnCurrentPage = false;
      let item = undefined;
      let row = undefined;

      if (rows) {
        for (let i = 0; i < rows.length; i++) {
          row = rows[i];
          isNotOnCurrentPage = this.page.list.every(item => {
            return item.id !== row.id;
          });
          if (isNotOnCurrentPage) return;
        }
        rows.forEach(row => {
          this.$refs.productTemplateTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.productTemplateTable.clearSelection();
        this.multipleSelection = [];
      }
    },
    /**
     * 导出产品
     * @param {Boolean} exportAll -- 是否导出全部
     */
    exportProduct(exportAll = false) {
      let ids = [];
      let fileName = `${formatDate(
        safeNewDate(),
        'YYYY-MM-DD'
      )}客户联系人数据.xlsx`;

      if (!exportAll) {
        if (!this.multipleSelection.length)
          return this.$platform.alert('请选择要导出的数据');
        ids = this.selectedIds;
      }
      console.log(ids, 'export');
      this.$refs.exportProductTemplatePanel.open(ids, fileName);
    },
    // 导出 列
    exportColumns() {
      return this.columns.map(c => {
        if (
          c.fieldName !== 'customerAddress'
          && c.fieldName !== 'remindCount'
          && c.fieldName !== 'updateTime'
        ) {
          c.export = true;
        }

        return c;
      });
    },
    // 构建产品导出参数
    exportParamsBuild(checkedArr, ids) {
      let exportAll = !ids || ids.length == 0;
      let exportSearchModel = exportAll
        ? {
          ...this.buildParams(),
          exportTotal: this.page.total
        }
        : { exportTotal: ids.length };

      return {
        productChecked: checkedArr.join(','),
        data: exportAll ? '' : ids.join(','),
        exportSearchModel: JSON.stringify(exportSearchModel)
      };
    },
    // 检测导出条数
    exportCountCheck(ids, max) {
      let exportAll = !ids || ids.length == 0;

      return exportAll && this.multipleSelection.length > max
        ? `为了保障响应速度，暂不支持超过${max}条以上的数据导出，请您分段导出。`
        : null;
    },

    // 取消选择的产品
    selectProductTemplateCancel(productItem) {
      if (!productItem || !productItem.id) return;

      this.multipleSelection = this.multipleSelection.filter(
        ms => ms.id !== productItem.id
      );
      this.multipleSelection.length < 1
        ? this.selectionToggle()
        : this.selectionToggle([productItem]);
    },
    // match data
    matchSelected() {
      if (!this.multipleSelection.length) return;
      const selected = this.page.list.filter(c => {
        if (this.multipleSelection.some(sc => sc.id === c.id)) {
          this.multipleSelection = this.multipleSelection.filter(
            sc => sc.id !== c.id
          );
          this.multipleSelection.push(c);
          return c;
        }
      }) || [];

      this.$nextTick(() => {
        this.toggleSelection(selected);
      });
    }
  },
  components: {
    [SearchPanel.name]: SearchPanel,
    [EditContactDialog.name]: EditContactDialog
  }
};
</script>

<style lang="scss" scoped>
.error-text {
  background: #FF4D4F;
}
.success-text {
  background: #00C853;
}
.loading-text {
  background: #FFA726;
}
.el-table{
  padding:0 !important;
}
.error-text,.success-text,.loading-text{
  padding:0px 6px;
  line-height:22px;
  border-radius: 11px;
  color:#fff;
  font-size: 12px;
}
</style>